<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">头部设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.headHeight"
        />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.backgroundColor"
        />
      </el-form-item>
      <el-form-item label="医生数量" class="doctor-number" v-if="optionsInfo?.doctorNumber">
        <el-input-number
            :min="1"
            :max="optionsInfo.maxNumber"
            size="small"
            v-model="optionsInfo.doctorNumber"
        />
        <el-tooltip class="item" effect="dark" content="此属性只在模拟环境生效" placement="bottom">
          <el-button>
            <i class="el-icon-warning"></i>
          </el-button>
        </el-tooltip>
      </el-form-item>
    </div>
    <!--科室设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">科室&诊室设置</el-divider>
      </div>
      <el-form-item label="科室&诊室" class="column-area">
        <el-checkbox-group v-model="optionsInfo['defaultShowCol']" :min="1" :disabled="false" @change="handleChange">
          <el-checkbox
              v-for="(item,index) in optionsInfo['colOptions']"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
          >
            {{item.label}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!--诊室选中字段-->
      <template v-if="optionsInfo['defaultShowCol'].includes('roomName')">
        <roomNameKeyEditor
            :designer="designer"
            :selected-widget="selectedWidget"
            :option-model="optionModel"
        />
      </template>
    </div>

    <!--科室设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">医生号别</el-divider>
      </div>
      <el-form-item label="医生号别">
        <el-switch v-model="optionsInfo.registerShow"/>
      </el-form-item>
    </div>

    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">候诊患者</el-divider>
      </div>
      <el-form-item label="候诊患者">
        <el-switch v-model="optionsInfo.waitPatientShow"/>
      </el-form-item>
    </div>

  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import roomNameKeyEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/roomNameKey-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "DRCTrendsConfig1-editor",
  components: { roomNameKeyEditor},

  componentName: "DRCTrendsConfig1-editor",

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      radio: 1,
      optionsInfo:Object(),
      constantDic: constantDic,
      predefineColors: types['predefineColors'],
    }
  },

  methods:{
    // 改变科室和诊室
    handleChangeDept(event,key){
      this.optionModel.DRCTrendsConfig[key] = event;
    },

    handleChange(event){
      let result  = event.includes('deptName');
      Reflect.set(this.optionsInfo,'doctorDept',!result)
      console.log(this.optionsInfo.doctorDept)
    }
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>


<style lang="scss" scoped>
.column-area,
.wait-patient-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__labe)l {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;;

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        padding: 10px 0;
      }
    }

    .el-checkbox-group{
      display: flex;
      flex-direction: column;
    }
  }

}

//医生数量
.doctor-number{
  display: flex;
  flex-direction: column;
  :deep(.el-form-item__label){
    width: 100% !important;
  }
  :deep(.el-form-item__content){
    margin-left: 0 !important;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    .el-input-number{
      flex-shrink: 1;
      width: 150px;
    }
    .el-button{
      color: #e58602;
      font-size: 18px;
      flex-shrink: 0;
      padding: 0 15px;
      border-color: transparent !important;
      background: transparent !important;
    }
  }
}
</style>